<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>ios7 进度条</title>
	<style>
	/* www.jiawin.com */
	/* VARIABLES */
	/* COLORS */
	/* BASE */
	html, body {
	        height: 100%;
	}
	body {
	        background-color: #f5f7f9;
	        color: #6c6c6c;
	        font: 300 1em/1.5em "Helvetica Neue", sans-serif;
	        margin: 0;
	        position: relative;
	}
	h1 {
	        font-size: 2.25em;
	        font-weight: 100;
	        line-height: 1.2em;
	        margin: 0 0 1.5em;
	}
	/* HELPERS */
	.text-center {
	        text-align: center;
	}
	/* GRID */
	.container {
	        left: 50%;
	        position: absolute;
	        top: 50%;
	        transform: translate(-50%, -50%);
	}
	/* PROGRESS */
	.progress {
	        background-color: #e5e9eb;
	        height: 0.25em;
	        position: relative;
	        width: 24em;
	}
	.progress-bar {
	        animation-duration: 3s;
	        animation-name: width;
	        background-image: linear-gradient(to right, #4cd964, #5ac8fa, #007aff, #34aadc, #5856d6, #ff2d55);
	        background-size: 24em 0.25em;
	        height: 100%;
	        position: relative;
	}
	.progress-shadow {
	        background-image: linear-gradient(to bottom, #eaecee, transparent);
	        height: 4em;
	        position: absolute;
	        top: 100%;
	        transform: skew(45deg);
	        transform-origin: 0 0;
	        width: 100%;
	}

	/* ANIMATIONS */
	@keyframes width {
	       0%, 100% {
	       transition-timing-function: cubic-bezier(1, 0, 0.65, 0.85);
	  }
	  0% {
	       width: 0;
	  }
	   100% {
	      width: 100%;
	  }
	}
	</style>
	<script type="text/javascript" src="js/prefixfree.min.js"></script>
</head>
<body>
	<div class="container">
		<h1 class="test-center">ios7进度条</h1>
		<div class="progress">
			<div class="progress-bar">
				<div class="progress-shadow"></div>
			</div>
		</div>
	</div>
</body>
</html>